<template>
  <div>
    <div class="pdf-viewer" style="z-index: 10">
      <el-image
        v-for="(item, index) in pages"
        class="pdf-page"
        :key="index"
        :src="item"
      ></el-image>
    </div>
  </div>
</template>
<script>
import eventBus from "@/utils/eventBus.js";

export default {
  name: "Web",
  components: {},
  data() {
    return {
      docType: "",
      wps: undefined,
      name: "",
      msg: "网页版WPS",
      url: "",
      token: "",
      dwUrl: "",
      loopId: 0,
      loopLastSec: 15,
      page: 1,
      totalPage: 0,
      docId: 0,
      pages: [],
      pageHidden: false,
    };
  },
  computed: {},
  watch: {
    url: function (nv, ov) {},
  },
  created() {
    this.getUrl();
  },
  methods: {
    // 上一页
    prePage() {
      if (this.page > 1) {
        this.page--;
      }
    },

    // 下一页
    nextPage() {
      if (this.page < this.totalPage) {
        this.page++;
      }
    },
    getUrl() {
      var self = this;

      // var query = this.$route.query;
      // fileId = Base64.decode(query.fid);
      eventBus.$on("getDetail", (res) => {
        //一些操作，message就是从top组件传过来的值
        console.log(res);
        if (res.code == 10000) {
          this.pageHidden = true;
        } else {
          this.pageHidden = false;
          var images = [];
          for (var i = 1; i <= res.data.detail.page_count; i++) {
            let url = res.data.detail.page_url + "/" + i + ".png";
            images.push(url);
          }
          console.log(images);
          self.pages = images;
        }
      });
    },

    getToken() {
      let token;
      if (this.id0) {
        let app;
        for (let i = 0; i < this.apps.length; i++) {
          if (this.apps[i].id == this.id0) {
            app = this.apps[i];
            break;
          }
        }
        if (app) {
          token = app.token + ":" + this.id0;
        }
      }
      return token;
    },
    getAppToken() {
      let token;
      if (this.id0) {
        let app;
        for (let i = 0; i < this.apps.length; i++) {
          if (this.apps[i].id == this.id0) {
            app = this.apps[i];
            break;
          }
        }
        if (app) {
          token = app.token;
        }
      }
      return token;
    },
    saveDocVer() {},
    download() {
      console.log("download " + this.dwUrl);
      if (this.dwUrl) {
        console.log("111eee");
        window.open(this.dwUrl, "_blank");
      }
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scope>
html,
body {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  height: 100%;
  /* 防止双击缩放 */
  touch-action: manipulation;
}

.pdf-viewer {
  padding-top: 40px;
  padding-bottom: 40px;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #2e3237;
}

.pdf-page {
  margin-top: 20px;
  width: 70%;
  max-width: 1300px;
}

.pager {
  width: 100%;
}

.pdf {
  margin-top: 20px;
  width: 70%;
}

.placeholder {
  margin-top: 200px;
  width: 100%;
  top: 0;
  left: 0;
  text-align: center;
  color: #666;
}

#app {
  min-height: 0px;
}

* {
  box-sizing: border-box;
}

#wpsc {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  /* 防止双击缩放 */
  touch-action: manipulation;
}

iframe {
  flex: 1;
}
.cui-topBar2 {
  height: 10px !important;
  text-align: center;
  display: none;
}
.cui-viewerchrome .cui-topBar2 {
  height: 10px !important;
  text-align: center;
}
</style>
